{$extend "tmpl.master.html" $}

{$/ NOTE: this template (and tmpl.master.html that it inherits from) intentionally mixes long-form and short-form tags purely for illustration purposes. you should probably pick one style or the other for your templates. :) /$}

{$: "#content" |
	userdetails = $.full_name ? "#userdetails" : "#nouser"
}
	<h1>grips Template Engine</h1>

	<p>This is how a grips Template works.</p>
	
	<p>
	{$% 
		<!-- start of a raw template tag, which disables template parsing inside -->
		Here's how to put in some completely raw $} 
		{$/ unparsed /$} content!
		<!-- here comes the end of the raw tag -->  
	%$}
	</p>

	<hr />
	
	<!-- let's include another template partial -->
	{$= @userdetails $}
{$}



{$: "#userdetails" |
	info = $.info ? "#info" |
	mylinks = $.links.length ? "#links" : "#nolinks"
}
	<div id="userdetails">
		{$= @"#controls" $}
	
		<h3>User Details</h3>

		{$let full_name = $.full_name }
			<p>Welcome back, {$=~h full_name $}!</p>
		{$}
		
		{$= @info $}
		
		<h3>Your Links</h3>
		
		{$= @mylinks $}

		Here's how to display some {$~h}<strong>html <em>content</em></strong>{$}
	</div>
{$}



{$: "#controls" |
	which_controls = $.full_name ? "#logout" : "tmpl.other.html#login"
}
	<p>{$= @which_controls $}</p>
{$}



{$: "#info" }
	<h3>Random Info</h3>
	
	<p>{$= $.info $}</p>
{$}



{$: "#logout" }
	<a class="controls logout" href="#">Logout</a>
{$}



{$: "#links" |
	fave[-1..6] = $.favenum ? "*" |
	partychoice["yes","no","maybe"] = $.mychoice ? "X" : " "
}
	<ul>
	{$/ loop over the "links" array /$}
	{$loop $.links }
		<!-- li:{$= _.key $} -->
		{$= @"#listitem" | _ $} <!-- set _ as the data context -->
	{$}
	</ul>

	Some numbers (* is my favorite):
	{$loop fave }{$= _.value $}{$= _.key $} {$}

	Will I be going to the party:
	{$* partychoice }
		{$= _.value $} {$= _.key $}
	{$}
{$}



{$: "#listitem" |
	evenodd = $.even ? "even" : "odd" |
	first = $.first ? "first" |
	last = $.last ? "last"
}
	<li id="link_{$= $.key $}" class="{$= evenodd $} {$= first $} {$= last $}">
		<a href="{$= $.value $}">{$= $.value $}</a>

		{$/ loop over the data context (`$`) object's properties /$}
		<div>context:</div>
		<ul>
		{$* $ }
			<li>{$= _.key $}: {$= _.value $}</li>
		{$}
		</ul>
	</li>
{$}



{$: "#nouser" }
	{$= @"#controls" $}
{$}



{$: "#nolinks" }
	<p>-no links yet-</p>
{$}



{$: "#footer" }
	<script src="grips.js"></script>
	<script src="template-bundle.js"></script>
	<script>
	document.getElementByID("content").innerHTML =
		grips.render("tmpl.index.html#content",{/*...*/});
	</script>
{$}



{$: "#styles" }
	{$= @"tmpl.master.html#styles" $}  <!-- Look, template inheritance/polymorphism!! -->
	<link rel="stylesheet" type="text/css" href="index.css" />
{$}